<template>
  <div class="box">
    <h1>品类管理 -- 添加品类</h1>
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="所属分类">
          <el-select v-model="form.region" placeholder="请选择一级品类">
            <el-option
              v-for="(item, index) in region1list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品类名称">
          <el-input placeholder="请输入品类名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { category1, category } from "../../../http/http";
export default {
  data() {
    return {
      form: {
        categoryId: 0,
        region: "",
        name:"",
        status: 0,
      },
      region1list: [],
    };
  },
  mounted() {
    category1().then((res) => {
      //   console.log(res);
      this.region1list = res.data.data;
    });
  },
  methods: {
    onSubmit() {
      console.log(this.form);
      category(this.form).then((res) => {
        console.log(res);
        // this.$message({
        //   message: res.data.msg,
        //   type: "success",
        // });
        this.$router.push({ path: "/shops" });
      });
    },
  },
};
</script>

<style>
.box {
  width: 80%;
  margin-left: 20%;
}
.card {
  width: 80%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.shops {
  width: 500px;
  height: 20px;
  background-color: white;
  color: #333333;
}
.cards {
  width: 100%;
  height: 100px;
  border: 1px solid grey;
}
</style>